<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="isBack">
					<u-icon size="38" color="#000" name="arrow-left"></u-icon>
				</view>
				<view class="title_bar_center">
					<text>提现账户</text>
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#0E7EFD"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<block v-else>
			<view class="input_list">
				<view class="input_item">
					<view class="input_item_value_other">
						<view class="other_title">
							<view class="input_item_left">
								<text class="input_item_left_1">收款码图片</text>
								<text class="input_item_left_2">*</text>
							</view>
							<view class="input_item_right">
								<input class="input" type="text" placeholder="可上传一张图片" :disabled="true"
									placeholder-style="color:#999;font-size:30rpx;">
							</view>
						</view>
						<view class="other_img" @tap.stop="updateImg">
							<image v-if="!payment_code" src="./static/6.png" mode=""></image>
							<image v-else @tap.stop="previewImg(payment_code)" :src="payment_code" mode="aspectFill"></image>
							<view v-if="payment_code" class="del_icon" @tap.stop="delImg">
								<u-icon name="close-circle-fill" color="#FF0000" size="32"></u-icon>
							</view>
						</view>
					</view>
					<view class="input_item_value">
						<view class="input_item_left">
							<text class="input_item_left_1">微信号</text>
							<text class="input_item_left_2">*</text>
						</view>
						<view class="input_item_right">
							<input v-model="weixin" class="input" type="text" placeholder="请输入提现微信号" maxlength="20"
								placeholder-style="color:#999;font-size:30rpx;">
						</view>
					</view>
					<view class="input_item_value no_border">
						<view class="input_item_left">
							<text class="input_item_left_1">手机号</text>
							<text class="input_item_left_2">*</text>
						</view>
						<view class="input_item_right">
							<input v-model="mobile" class="input" type="number" placeholder="请输入提现手机号" maxlength="11"
								placeholder-style="color:#999;font-size:30rpx;">
						</view>
					</view>
				</view>
			</view>
			<view class="confirm_btn" @tap.stop="bindAccount">确认</view>
		</block>
	</view>
</template>

<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		data() {
			return {
				isShow: true,
				payment_code: "",
				payment_code_id: "",
				weixin: "",
				mobile: "",
			}
		},
		onLoad() {
			this.check();
		},
		onShow() {
			
		},
		methods: {
			// 检测绑定账号  postCheckBindAccount
			check() {
				this.$api.post(global.apiUrls.postCheckBindAccount, {

				}).then(res => {
					if (res.data.code == 1) {
						this.getAccount();
					} else {
						this.isShow = false;
					}
				})
			},
			// 获取绑定过的账号信息  postAccountInfo
			getAccount() {
				this.$api.post(global.apiUrls.postAccountInfo, {
					account_type: 1
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.payment_code = res.data.data.payment_code;
						this.weixin = res.data.data.account;
						this.mobile = res.data.data.mobile;
						this.payment_code_id = res.data.data.payment_code_id;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			previewImg(path) {
				let urls = [];
				urls.push(path);
				uni.previewImage({
					current: 0,
					urls: urls
				});
			},
			// 绑定提现账号
			bindAccount() {
				if (!this.payment_code) {
					this.$message.info('请上传收款码图片');
					return;
				}
				if (!this.weixin) {
					this.$message.info('请输入提现微信号');
					return;
				}
				if (!validate(this.mobile, 'require')) {
					this.$message.info('请输入提现手机号');
					return false;
				}
				if (!validate(this.mobile, 'phone')) {
					this.$message.info('请输入正确的手机号');
					return false;
				}
				this.$api.post(global.apiUrls.postBindAccount, {
					payment_code: this.payment_code_id,
					account: this.weixin,
					mobile: this.mobile
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					}
				})
			},



			// 上传图片   postUpload
			updateImg() {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: global.API_BASE_URL + global.apiUrls.postUpload, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							header: {
								'user-token': global.token
							},
							name: 'file',
							formData: {
								'dir': 'images'
							},
							success: (uploadFileRes) => {
								// console.log(JSON.parse(uploadFileRes.data).data.path);
								_this.payment_code = JSON.parse(uploadFileRes.data).data.path;
								_this.payment_code_id = JSON.parse(uploadFileRes.data).data.id;
							}
						});
					}
				});
			},
			delImg() {
				this.payment_code = "";
				this.payment_code_id = "";
			},
			isBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			// background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;

			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;

				.title_bar_left {
					width: 50rpx;
					display: flex;
					align-items: center;
				}

				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}

				.title_bar_right {
					width: 50rpx;
				}
			}
		}

		.input_list {
			padding: 30rpx;
			position: relative;

			.input_item {
				padding: 0 30rpx;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 24rpx;

				.input_item_value {
					display: flex;
					padding: 40rpx 0;
					border-bottom: 1rpx solid #eee;

					.input_item_left {
						width: 170rpx;

						.input_item_left_1 {
							font-size: 30rpx;
							margin-right: 8rpx;
						}

						.input_item_left_2 {
							font-size: 30rpx;
							color: #CC0000;
						}
					}

					.input_item_right {
						width: calc(100% - 170rpx);
						display: flex;
						text-align: right;
						align-items: center;

						.input {
							width: 100%;
						}

						.input_item_right_icon {
							width: 30rpx;
							margin-left: 8rpx;
						}
					}
				}

				.input_item_value_other {
					padding: 40rpx 0;
					border-bottom: 1rpx solid #eee;

					.other_title {
						display: flex;

						.input_item_left {
							width: 170rpx;

							.input_item_left_1 {
								font-size: 30rpx;
								margin-right: 8rpx;
							}

							.input_item_left_2 {
								font-size: 30rpx;
								color: #CC0000;
							}
						}

						.input_item_right {
							width: calc(100% - 170rpx);
							display: flex;
							text-align: right;
							align-items: center;

							.input {
								width: 100%;
							}

							.input_item_right_icon {
								width: 30rpx;
								margin-left: 8rpx;
							}
						}
					}

					.other_img {
						width: 100%;
						height: 180rpx;
						margin-top: 24rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}

						.del_icon {
							width: 32rpx;
							height: 32rpx;
							position: absolute;
							top: -14rpx;
							right: -14rpx;
						}
					}
				}

				.no_border {
					border-bottom: 1rpx solid #fff;
				}
			}

			.add_view {
				width: 187rpx;
				height: 61rpx;
				position: absolute;
				left: 50%;
				bottom: 0rpx;
				transform: translateX(-50%);
				z-index: 99;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.confirm_btn {
			width: 610rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background: #BDD9FD;
			border-radius: 22rpx;
			font-size: 32rpx;
			color: #fff;
			margin: 200rpx auto 0;
		}
	}
</style>